
<template>
  <view class="container">
    <view class="tabs">
      <view class="tab active">已上架</view>
      <view class="tab">已下架</view>
    </view>
    <view class="items">
      <view class="item" v-for="(item, index) in items" :key="index">
        <view class="image">
          <image :src="item.image" mode="aspectFit"></image>
        </view>
        <view class="info">
          <text class="title">{{ item.title }}</text>
          <text class="price">寄售金额 {{ item.price }}万</text>
          <text class="manager">经理人回复：{{ item.manager }}</text>
          <button class="exposure" @click="expose(item)">点击曝光</button>
          <text class="stats">浏览量：{{ item.views }}人 成交均价：{{ item.average }}万</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "myHouse",
  data() {
    return {
      items: [
        {
          image: '/path/to/image1.jpg',
          title: '袁州区 碧桂园龙悦台',
          price: 150,
          manager: 200,
          views: 200,
          average: 149
        },
        {
          image: '/path/to/image2.jpg',
          title: '袁州区 碧桂园龙悦台',
          price: 150,
          manager: 200,
          views: 200,
          average: 149
        }
      ]
    };
  },
  methods: {
    expose(item) {
      // 处理点击曝光逻辑
      console.log('曝光', item);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
}

.tab.active {
  background-color: #fff;
  border-bottom: 2px solid #000;
}

.items {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.image {
  width: 120px;
  height: 120px;
  margin-right: 20px;
}

.image image {
  width: 100%;
  height: 100%;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.price {
  color: #ff0000;
}

.manager {
  color: #888;
}

.exposure {
  background-color: #f0f0f0;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}

.stats {
  color: #888;
}
</style>